<template>
	<div class="grass">
		<div class="grass-top">
			<label>小众种草</label>
			<label>游侠客独一无二的旅行体验</label>
		</div>
		<div class="grass-buttom swiper">
			<ul class="swiper-wrapper">
				<li  class="swiper-slide" v-for="item in imgs" :key="item.id">
					<img :src="require('@/'+ item.imgUrl)" >
					<div class="bg"></div>
					<h3>{{item.title}}</h3>
					<p>{{item.hots}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default {
		name:'Grass',
		props:['grass_list'],
		data() {
			return{
				imgs:this.grass_list
			}
		},
		watch:{
			grass_list(){
				this.imgs=this.grass_list
			}
		},
		updated() {
				new Swiper('.grass-buttom',{
					slidesPerView : 'auto',
				})
		}
	}
</script>

<style scoped>
	.grass{
		box-shadow: 0 0 10px #d8d8d8;
		margin: 0.5rem auto;
		height: 4.8rem;
		width: 100%;
		padding-bottom: 0.3rem;
		overflow: hidden;
		border-radius: 0.3rem;
	}
	.grass-top{
		width: 95%;
		height: 20%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.grass-top label:first-child{
		font-size: 0.4rem;
		font-weight: bold;
		margin: 0 0.4rem 0 0.4rem;
	}
	.grass-top label:last-child{
		font-size: 0.34rem;
		color: #ff9e51;
	}
	.grass-buttom{
		width: 95%;
		height: 80%;
	}
	.grass-buttom ul{
		width: 100%;
		height: 100%;
	}
	.grass-buttom ul li{
		width: 34%;
		height: 100%;
		float: left;
		margin-right: 0.12rem;
		position: relative;
		display:flex;
		justify-content: center;
		color:white;
		background-color: #FF9E51;
		overflow: hidden;
	}
	.grass-buttom ul li:nth-child(1){
		border-radius: 0 0 0 0.2rem;
	}
	.grass-buttom ul li .bg{
		position: absolute;
		color: black;
		width:100%;
		height:100%;
		background: linear-gradient(180deg,rgba(255, 255, 255, 0.1),rgba(0, 0, 0, 0.4))
	}
	.grass-buttom ul li img{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.grass-buttom ul li h3{
		position: absolute;
		bottom: 20%;
		font-weight:bold;
		font-size:0.39rem;
	}
	.grass-buttom ul li p{
		position: absolute;
		bottom: 6%;
	}
</style>
